<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #f60;
    }

    .svg1 {
      border: 2px solid red;
    }

    .svg1.move line {
      stroke-dashoffset: 0;
    }

    .svg1 line {
      stroke-dasharray: 200, 200;
      stroke-dashoffset: 200;
      transition: all 2s linear;
      animation: moveline 2s linear;
      animation-fill-mode: forwards;
    }

    @keyframes moveline {
      0% {
        stroke-dashoffset: 200;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    /* ----------- */
    /* .checkmark {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      stroke-width: 2;
      stroke: #fff;
      box-shadow: inset 0 0 0 #7ac142;
      animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    } */

    /* 初始化时圆 长度值可以使用getTotalLength()获取 */
    /* .checkmark__circle {
      stroke-dasharray: 157;
      stroke-dashoffset: 157;
      stroke: #7ac142;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    } */

    /* 初始化时对勾 */
    /* .checkmark__check {
      stroke-dasharray: 34;
      stroke-dashoffset: 34;
      transform-origin: 50% 50%;
      stroke: #7ac142;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes scale {

      0%,
      100% {
        transform: none;
      }

      50% {
        transform: scale3d(1.1, 1.1, 1x);
      }
    }

    @keyframes fill {
      100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
      }
    } */
    /* 定义svg */
    .checkmark {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      stroke-width: 2;
      stroke: #fff;
      box-shadow: inset 0px 0px 0px #7ac142;
      animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    }

    .checkmark__circle {
      stroke-dasharray: 157;
      stroke-dashoffset: 157;
      stroke: #7ac142;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    .checkmark__check {
      transform-origin: 50% 50%;
      stroke-dasharray: 34;
      stroke-dashoffset: 34;
      fill: none;
      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes scale {

      0%,
      100% {
        transform: none;
      }

      50% {
        transform: scale3d(1.1, 1.1, 1);
      }
    }

    @keyframes fill {
      100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
      }
    }

    .cm-svg {
      cursor: pointer;
    }

    .text {
      stroke-dasharray: 271;
      stroke-dashoffset: 271;
      stroke: #fff;
      animation: stroke 2s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    }

    .rect {
      stroke-dasharray: 308;
      stroke-dashoffset: 308;
      stroke: #fff;
      animation: stroke 2s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }
  </style>
</head>

<body>
  <svg x="0" y="0" width="300px" height="300px" viewBox="0 0 300 100" class="svg1">
    <line x1="20" y1="50" x2="220" y2="50" stroke="#000" stroke-width="1"></line>
  </svg>

  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" />
    <path class="checkmark__check" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
  </svg>

  <a class="cm-svg-link" href="">
    <svg class="cm-svg" width="120" height="40" viewBox="0 0 120 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 271 -->
      <path class="text"
        d="M54.5185 16.777H55.1034L55.0124 16.1992C54.8194 14.9747 54.4463 13.8746 53.8864 12.906C53.3304 11.9369 52.6252 11.1139 51.7714 10.4411C50.9211 9.76414 49.9629 9.25366 48.9004 8.90923C47.8439 8.55731 46.7112 8.38352 45.5057 8.38352C43.5403 8.38352 41.7692 8.85556 40.2068 9.80931C38.6432 10.7567 37.4172 12.115 36.5268 13.8661C35.631 15.6205 35.1939 17.7014 35.1939 20.0909C35.1939 22.4734 35.6275 24.5533 36.5152 26.3139L36.516 26.3154C37.4065 28.0667 38.6323 29.4283 40.1954 30.3827L40.1969 30.3836C41.7595 31.3302 43.534 31.7983 45.5057 31.7983C46.7557 31.7983 47.9201 31.6133 48.9946 31.2376C50.0624 30.8643 51.0164 30.3356 51.8525 29.6502L51.8529 29.6499C52.6958 28.9575 53.3856 28.1358 53.9203 27.1873C54.4619 26.2318 54.8251 25.1885 55.0118 24.0611L55.1077 23.4813L54.5201 23.4794L51.1962 23.4688L50.7825 23.4674L50.7037 23.8736C50.58 24.5118 50.3577 25.0675 50.0418 25.5476L50.0409 25.549C49.7252 26.0322 49.3405 26.4389 48.8857 26.772C48.429 27.1065 47.9157 27.3624 47.3424 27.5385C46.7745 27.708 46.1701 27.794 45.527 27.794C44.3725 27.794 43.3471 27.5051 42.4373 26.9332C41.5357 26.3665 40.8104 25.5225 40.2696 24.3747C39.7406 23.2368 39.4645 21.8152 39.4645 20.0909C39.4645 18.3815 39.7404 16.9667 40.2696 15.8284C40.8108 14.6796 41.5336 13.8313 42.4294 13.2575C43.338 12.6801 44.3692 12.3878 45.5376 12.3878C46.1872 12.3878 46.7939 12.4772 47.3603 12.653L47.3619 12.6534C47.9342 12.829 48.4468 13.0876 48.9033 13.4284C49.3588 13.7684 49.7442 14.1822 50.0606 14.6729C50.3687 15.1508 50.5849 15.7123 50.7025 16.3656L50.7766 16.777H51.1946H54.5185ZM58.4576 8.68182H57.9576V9.18182V31V31.5H58.4576H61.5897H62.0897V31V17.2534L67.7638 31.157L67.8908 31.468H68.2267H70.8262H71.1621L71.2891 31.1571L76.9632 17.2628V31V31.5H77.4632H80.5953H81.0953V31V9.18182V8.68182H80.5953H76.6003H76.2648L76.1376 8.99232L69.5265 25.1349L62.9153 8.99232L62.7881 8.68182H62.4526H58.4576Z" />
      <!-- 308 -->
      <rect class="rect" x="0.5" y="0.5" width="119" height="39" rx="4.5" />
    </svg>
  </a>








  <script>
    document.addEventListener("click", function () {
      var svg1 = document.querySelector(".svg1");
      svg1.classList.toggle("move")
    });
  </script>
</body>

</html>